  //包装一个显示数据的方法
  let datas = function(item) {
      let html =
          `
        <tr class="tr_row">
            <td>
                <input type="text" name="id" value=${item.id}> 
            </td>
            <td>
                <input type="text" name="name" value=${item.pname}> 
            </td>
            <td>
                <input type="text" name="name" value=${item.price}> 
            </td>
            <td>
                <input type="button" value="删除" onclick="deleted(${item.id})">
                <input type="button" value="修改" onclick="endit(${item.id})">
            </td>
        </tr> 
    `
      $('#data_table').append(html);
  };

  //显示数据
  $(function() {
      $.get('http://localhost:8000/produce', (data) => {
          data.map(item => {
              datas(item)
          })
      });
  })

  //查找
  function query() {
      let keyword = $('#keyword').val();
      if (keyword) { //这里和后端都要判断，这个是判断是否为空，后端判断是查找还是展示所有数据，前端可以不用但后端必须用
          $.get(`http://localhost:8000/produce?keyword=${keyword}`, (data) => {
              $('.tr_row').remove();
              data.map(item => {
                  datas(item)
              })
          })
      } else {
          alert('不允许查找为空');
      }
  }

  //删除
  function deleted(id) {
      $.ajax({
          url: `http://localhost:8000/produce/${id}`,
          type: "delete",
          success: () => {
              $('.tr_row').remove();
              window.location.href = 'info.html';
          }
      })
  }

  //创建一个用于新增和修改的共同方法
  function addorEndit(item) {
      $('body').html('');
      let html;
      if (item === null) {
          html =
              `
          <table id="r_data_table" ,border="0" cellpadding="0" cellspacing="0">
              <tr>
                  <h1>请添加产品信息</h1>
              </tr>
              <tr>
                  <td hidden="hidden">
                      id : <input type="text" id="id" >
                  </td>
              </tr>    
              <tr> 
                  <td>           
                      名称 : <input type="text" id="pname" >
                  </td>
              </tr>  
              <tr>   
                  <td>
                      价格 : <input type="text" id="price" >
                  </td>
              </tr>
              <tr>
                  <td>
                      <input style="margin-left: 105px; margin-top: 5px;" type="button" value="保存" style="margin: 10px;" onclick="save()">
                  </td>
                  <td>
                      <input style="margin-left: -40px; margin-top: 5px;" type="button" value="取消" style="margin: 10px;" onclick="cancal()">
                  </td>      
              </tr>
              <table/>
              `
      } else {
          html =
              `
              <table id="r_data_table" ,border="0" cellpadding="0" cellspacing="0">
                  <tr>
                      <h1>请修改产品信息</h1>
                  </tr>
                  <tr>
                      <td hidden="hidden">
                          id : <input type="text" id="id" value=${item.id}>
                      </td>
                  </tr>    
                  <tr> 
                      <td>           
                          名称 : <input type="text" id="pname" value=${item.pname}>
                      </td>
                  </tr>  
                  <tr>   
                      <td>
                          价格 : <input type="text" id="price" value=${item.price}>
                      </td>
                  </tr>
                  <tr>
                      <td>
                          <input style="margin-left: 105px; margin-top: 5px;" type="button" value="保存" style="margin: 10px;" onclick="save()">
                      </td>
                      <td>
                          <input style="margin-left: -40px; margin-top: 5px;" type="button" value="取消" style="margin: 10px;" onclick="cancal()">
                      </td>      
                  </tr>
                  <table/>
              `
      }
      $('body').append(html);
  }

  //新增. 新增没有id所以传参为null
  function add() {
      addorEndit(null);
  }
  //修改
  function endit(id) {
      $.get(`http://localhost:8000/produce/get/${id}`, (data) => {
          data.map(item => {
              addorEndit(item);
          })
      })
  }

  //保存
  function save() {
      let id = $('#id').val();
      let pname = $('#pname').val();
      let price = $('#price').val();
      let obj = {
              id,
              pname,
              price
          }
          //判断是新增还是修改
      if (id == '') { //新增
          $.post('http://localhost:8000/produce', obj, (res) => {
              if (res['code'] === 200) {
                  window.location.href = 'info.html';
              } else {
                  alert(res['msg'])
              }
          })
      } else {
          $.ajax({ //修改
              url: `http://localhost:8000/produce`,
              method: "put",
              data: obj,
              success: () => {
                  window.location.href = 'info.html';
              }
          })
      }
  }

  //取消保存
  function cancal() {
      window.location.href = 'info.html';
  }